<template>
  <div class="nnn-contain">
    <search-header
      ref="search"
      :single="false"
      :middle="false"
      :limit="limit"
      type="store"
      @getResultByTag="getResultByTag"
      @resetResult="resetResult"
    />

    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="storeNum" label="店铺编号" width="80" />
        <el-table-column label="店铺名称" width="120">
          <template slot-scope="{ row }">
            <span>{{ row.storeName + ' - ' + row.subStoreName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺行业" width="100">
          <template slot-scope="{ row }">
            <span>{{ row.storeIndustryErinId | storeIndustryErins }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="storeAddress"
          label="店铺地址"
          width="150"
        />
        <el-table-column prop="storePhone" label="联系电话" width="120" />
        <el-table-column prop="promoterId" label="推广人ID" width="100" />
        <el-table-column prop="statusOfAudit" label="状态" width="100" />
        <el-table-column prop="remarkOfAudit" label="备注" width="150" />
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              :disabled="row.statusOfAudit === '通过' || row.statusOfAudit === '不通过'"
              @click="storeAudit(row.storeNum)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-sizes="[4, 6, 8, 10]"
          :page-size="limit"
          layout="sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAllStore,
  getAllStoreList,
  getAllStoreListbyTag
} from '@/api/storeserin'
import { tidyTotal } from '@/filters'

export default {
  name: 'Approve',
  components: {},
  props: {},
  data() {
    return {
      tableData: [], // 店铺列表
      currentPage: 1, // 当前也
      page: 1, // 默认是第一页
      limit: 4, // 请求的店铺数
      total: 0,
      sales: 0,
      searchList: []
    }
  },
  computed: {
    storeName() {
      return this.$refs.search.oldStoreName
    },
    storeCategory() {
      return this.$refs.search.oldStoreCategory
    }
  },
  watch: {},
  created() {
    // 获取总条数
    this.getAllStore()
    this.getAllStoreList()
  },
  mounted() {},
  methods: {
    // 获取总条数
    async getAllStore() {
      const res = await getAllStore()
      this.total = res ? res.length : 0
    },
    // 获取所有店铺列表
    async getAllStoreList() {
      const res = await getAllStoreList(this.page, this.limit)
      this.tableData = res || []
    },
    // 根据关键字获取所有店铺列表
    async getAllStoreListbyTag() {
      let storeCategory = this.storeCategory
      if (this.storeCategory === '全部' || !this.storeCategory) {
        storeCategory = undefined
      }
      const res1 = await getAllStoreListbyTag({
        storeName_like: this.storeName,
        storeIndustryErinId: storeCategory
      })
      const res2 = await getAllStoreListbyTag({
        storeNum_like: this.storeName,
        storeIndustryErinId: storeCategory
      })
      const res3 = await getAllStoreListbyTag({
        subStoreName_like: this.storeName,
        storeIndustryErinId: storeCategory
      })
      const res = [res1, res2, res3]
      this.total = tidyTotal(res)
      this.tableData = tidyTotal(res).slice(0, this.limit)
    },
    // 审核
    storeAudit(storeNum) {
      // 跳转页面
      this.$router.push(`/stores/storeAudit/${storeNum}`)
    },
    // pageSize 改变时会触发
    handleSizeChange(val) {
      this.limit = val
      if (this.isSearch()) {
        // 有内容
        // this.getAllStoreListbyTag()
        this.tableData = this.searchList.slice(
          val * (this.page - 1),
          val * this.page
        )
      } else {
        this.getAllStoreList()
      }
      // console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page = val
      // console.log(`当前页: ${val}`)
      if (this.isSearch()) {
        // 有内容
        // this.getAllStoreListbyTag()
        this.tableData = this.searchList.slice(
          this.limit * (val - 1),
          this.limit * val
        )
      } else {
        this.getAllStoreList()
      }
    },
    // 子组件传过来根据内容查询到的数据
    getResultByTag(val, total) {
      // 页码要在第一页
      this.currentPage = 1
      // 需要total
      this.tableData = val
      this.total = total.length
      this.searchList = total
    },
    // 需要区分一下头部查询框中有没有内容
    isSearch() {
      return this.$refs.search.isClickSearch
    },
    // 重置数据
    resetResult() {
      this.getAllStoreList()
      this.getAllStore()
    }
  }
}
</script>

<style scoped lang="scss">
@import '~@/styles/storeerin';
</style>
